<template>
   <div class="">
      <el-form ref="form" label-width="100px" size="small">
         <el-form-item :label="item.title" v-for="(item, index) in list" :key="index">
            <!-- type: 1-字符串 2-图片 3-不能修改 4-开关 5-富文本 -->
            <el-input v-if="item.type == 1 || item.type == 3" :disabled="item.type == 3" v-model="item.value"
               :placeholder="item.description" class="item-input">
            </el-input>

            <div v-if="item.type == 2">
               <image-upload :file-size="1" :is-multiple="false" :limit="1" :value="item.value" :index="index"
                  :file-type="['png', 'jpg', 'jpeg', 'gif']" @input="afterUpload"></image-upload>
               <el-input v-model="item.value" :placeholder="item.description" class="item-input" />
            </div>

            <el-switch v-if="item.type == 4" active-value="1" inactive-value="0" v-model="item.value"></el-switch>

            <tinymce v-if="item.type == 5" v-model="item.value"></tinymce>
         </el-form-item>

         <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>

<script>
import ImageUpload from '@/components/UploadFile/image.vue'
import Tinymce from '@/components/Tinymce'
import { cloneDeep } from 'lodash'
export default {
   components: {
      ImageUpload,
      Tinymce
   },
   props: {
      list: Array
   },
   data() {
      return {
      }
   },
   methods: {
      afterUpload(list, index) {
         console.log("afterUpload", list)
         if (!list) return;
         let file = list[0];
         if (file) {
            this.list[index].value = file.url
         }
      },
      onSubmit() {
         this.$emit('save', cloneDeep(this.list))
      }
   }
}
</script>

<style>
.item-input {
   width: 30%;
}
</style>
